{extend name="common/block" /}

{block name="style"}
<style>
    .layui-table-cell{
        text-align:center;
        height: auto!important;
        white-space: normal;
    }
    .layui-table img{
        max-width:300px
    }
</style>
{/block}
{block name="content"}
<div class="layui-btn-container " style="display: inline-block;">
   <!-- <button id="btnDeleteChecked" class="layui-btn layui-btn-sm layui-btn-danger">
        <i class="layui-icon">&#xe640;</i>批量删除
    </button>-->
    <button class="layui-btn layui-btn-sm j-open layui-btn-normal j-hidden"
            j-href='{:url("create")}'
            j-title="新增"
            j-type="2"
            j-config='{"area":["80%","80%"],"anim":2}'
    >
        <i class="layui-icon">&#xe654;</i>新增
    </button>

</div>
<div class="j-right j-hidden" >
    <input class="layui-input" id="edtSearch" value="" placeholder="输入搜索条件"
           style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe615;</i>搜索
        </button>
        <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#x1006;</i>清除搜索
        </button>
    </div>
</div>

<script type="text/html" id="opera">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<table id="table" lay-filter="FileManager"></table>
{/block}

{block name="script"}
<script>
    layui.use(['table', 'layer', 'jquery'], function () {
        var table = layui.table
            , layer = layui.layer
            , $ = layui.jquery;

        table.render({
            elem: '#table',
            url: '{:url("index")}',
            page: true,
            height: 'full-200',
            toolbar: true,
            method:'post',
            cols: [[ //表头
                {type:'checkbox'}
                , {field:'id',title:'ID',width:70}
                , {field:'name',title:'文件名'}
                , {field:'file_url',title:'文件',templet:function(d){
                    let extList = ['png','jpg','jpeg','gif'];
                        if(extList.indexOf(d.ext) > -1){
                            return "<div><img src='"+d.file_url+"' width=\"100%\" onclick=\"showImg(this)\" alt='"+d.name+"'></div>";
                        }else{
                            return "<div><a href='"+d.file_url+"' target='_blank'>下载["+d.name+"]</a></div>";
                        }
                }}
                , {field:'memi',title:'Mime类型'}
                , {field:'md5',title:'MD5',width:300}
                , {field:'createtime',title:'上传时间'}
            ]],
        })
        
         table.on('tool(FileManager)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定执行删除操作', function(index){
                    layer.close(index);
                    $.get('delete', {id:data.id},function(r){
                        if(r.code == 1){
                            showpopup(r.msg);
                            obj.del();
                        }else{
                            showpopup(r.msg);
                        }
                    },'json')
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type:2,
                    content:'update?id='+data.id,
                    shadeClose:true,
                    area:['80%','80%'],
                })
            }
        });
})
</script>
{/block}
